<style> .layui-form-select dl { max-height:200px; }
.audio_msg .layui-layer-content{background-color: #fff; color: #1198fa;}</style>
    <div class="tts"  id="ttsContent" style="display: none;padding: 10px">
                <form class="layui-form" >
                    <div class="panel panel-default" role="tabpanel" style="">
                        <div class="panel-heading">配音设置</div>
                        <div  style="position: absolute;right:20px;top:22px" ><span id="count" style="color: red">600</span>/600</div>
                        <div class="layui-form-item">
                            <textarea rows="6" cols="20" class="form-control"  name="tts_text" id="tts_text" style="resize: none;"></textarea>
                        </div>

                        <div class="layui-form-item">
                           <div  class="layui-inline">
                               <label class="layui-form-label" style="width: 90px">选择主播:</label>
                               <div class="layui-input-inline" style="width: 260px;">
                                   <select name="zhubo" lay-verify="required" lay-filter="zhubo" id="zhubo" lay-search style="width:258px"></select>
                               </div>
                           </div>
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 90px">主播音量:</label>
                                <div class="layui-input-inline" style="width: 200px;">
                                    <div id="soundSlide" style="margin-top: 18px"></div>
                                </div>
                                <div class="layui-input-inline" style="width: 50px;">
                                    <input type="text" disabled name="sound_slide" id="sound_slide" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 90px">主播语速:</label>
                                <div class="layui-input-inline" style="width: 200px;">
                                    <div id="yusuSlide" style="margin-top: 18px"></div>
                                </div>
                                <div class="layui-input-inline" style="width: 50px;">
                                    <input type="text" disabled name="yusu_slide" id="yusu_slide" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 90px">主播语调:</label>
                                <div class="layui-input-inline" style="width: 200px;">
                                    <div id="yindiaoSlide" style="margin-top: 18px"></div>
                                </div>
                                <div class="layui-input-inline" style="width: 50px;">
                                    <input type="text" disabled name="yudiao_slide" id="yudiao_slide" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default" role="tabpanel" style="">
                        <div class="panel-heading" style="margin-bottom: 15px;">背景音乐</div>
                        <div class="layui-form-item">
                            <div  class="layui-inline">
                                <label class="layui-form-label" style="width: 90px">背景音乐:</label>
                                <div class="layui-input-inline" style="width: 220px;">
                                    <select name="bgmType" lay-filter="bgmType" id="bgmType" lay-search style="width: 176px">
                                        <option value="-1">请选择</option>
                                    </select>
                                </div>

                                <div class="layui-input-inline" style="width: 405px;">
                                    <select name="bgmName"  lay-filter="bgmName" id="bgmName" lay-search style="width: 186px">
                                        <option value="-1">请选择</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 90px">背景地址:</label>
                                <div class="layui-input-block" style="margin-left: 0;width: 725px;" >
                                        {php echo view_form_field_audio('bgm_src',$config['musicsrc']);}
                                </div>
                        </div>
                    </div>
                        <input type="hidden" name="ttsId" id="ttsId"  value="">

                     <div class="layui-form-item">
                             <div class="layui-progress layui-progress-big" lay-filter="createTts" id="progressTts" lay-showpercent="true" style="display: none">
                                 <div class="layui-progress-bar" lay-percent="20%" ></div>
                             </div>
                     </div>

                    <div class="layui-form-item" style="text-align: center;">
                            <button type="button"  id="tts_submit" class="layui-btn layui-btn-normal layui-btn-lg" >试听</button>
                            <button type="button"  class="layui-btn  layui-btn-lg" id="entryTts" style="display: none">确定</button>
                            <audio id="audioTts" src="" style="display: none;"></audio>
                    </div>
                </form>
          </div>

<script type="text/javascript">

    var bgMusicArr = [];
    layui.use(['slider','form','layer','jquery','element'], function(){
        var slider = layui.slider;
        var form = layui.form;
        var $ = layui.$;
        var layer = layui.layer;
        var element = layui.element;
        var ttsOpen;
        var player = $("#audioTts")[0]; /*jquery对象转换成js对象*/
        var DISABLED = 'layui-btn-disabled';

        var sound = slider.render({
            elem: '#soundSlide',  //绑定元素
            value:10,
            min:0,
            max:15,
            change: function(value){
                $('#sound_slide').val(value);
            }
        });

        var yudiao = slider.render({
            elem: '#yindiaoSlide',  //绑定元素
            value:5,
            min:0,
            max:15,
            change: function(value){
                $('#yudiao_slide').val(value);
            }
        });

        var yusu = slider.render({
            elem: '#yusuSlide',  //绑定元素
            value:5,
            min:0,
            max:15,
            change: function(value){
                //do something
                $('#yusu_slide').val(value);
            }
        });


        var url = "{php echo createWebUrl('tts',array('op' => 'getZhubo'));}";
        $('#addTts').click(function(){
            ttsOpen = layer.open({
                type: 1,
                 title: '语音合成',
                closeBtn: 1,
                anim: 2,
                shadeClose: true,
                area:  ['800px', '680px'],
                content: $("#ttsContent"),
                btn: false,
                zIndex:1000,
                success: function(layero, index){
                    bgMusicArr = arrOption;
                    $('#sound_slide').val(10);
                    $('#yusu_slide').val(5);
                    $('#yudiao_slide').val(5);
                    $('#count').text(0);
                    var last_data_url = "{php echo createWebUrl('tts',array('op' => 'lastTts','themeid'=>$themeid));}";
                    //获取最后一条记录
                    var zhubo;
                    $.getJSON(last_data_url,function (res1){
                        if (res1.error == 0 && res1.data) {
                            var config = JSON.parse(res1.data.config);
                            var volume_val = config.volume?config.volume:10;
                            var speech_val = config.speech?config.speech:5;
                            var pitch_val = config.pitch?config.pitch:5;
                            var voice_val = config.voice?config.voice:0;
                            sound.setValue(volume_val);
                            yusu.setValue(speech_val);
                            yudiao.setValue(pitch_val);
                            zhubo=voice_val;
                            $('#sound_slide').val(volume_val);
                            $('#yusu_slide').val(speech_val);
                            $('#yudiao_slide').val(pitch_val);
                            if(config.bgm_src){
                                $('[name="bgm_src"]').val(config.bgm_src);
                            }
                            $('#tts_text').text(res1.data.text);
                            statInputNum($('#tts_text'),$('#count'));
                            $("#audioTts").attr('src',res1.data.audio_url);
                            $('#ttsId').val(res1.data.id);
                            $('#entryTts').show();
                        }else{
                            zhobo = 0;
                        }
                    }),

                        $.getJSON(url, function(res) {
                            if (res.error == 0) {
                                var list = res.data;
                                var s = '';
                                $.each(list, function (i, xx) {
                                    if(zhubo==xx.code){
                                        s = s + '<option value="' + xx.code + '" selected >'+xx.name+'---' + xx.type + '</option>';
                                    }else{
                                        s = s + '<option value="' + xx.code + '"  >'+xx.name+'---' + xx.type + '</option>';
                                    }

                                });
                                $("#zhubo").html(s);
                                form.render('select');//重新渲染 固定写法
                            }
                        });
                    //layer
                    bgmTypeHtml = '';
                    $("#bgmType").children().not(":first").remove();
                    for (var i in bgMusicArr) {
                        bgmTypeHtml += "<option value='" + i + "'>" + bgMusicArr[i].name + "</option>";
                    }
                    $("#bgmType").append(bgmTypeHtml);
                    form.render('select');
                    $('.selectpicker').append(str);
                    

                },
                cancel: function(index, layero){
                    $("#tts_text").val('');
                    if (player.play){ /*如果已经暂停*/
                        player.pause();
                    }
                    layer.close(index);
                    return false;
                }
            });
        });

        var loading,visibleTime;
        $(document).on('click',"#tts_submit",function() {
            if (player.play){ /*如果已经暂停*/
                player.pause();
            }
            var text = $('#tts_text').val();
            var zhubo = $('#zhubo').val();
            var yusu_slide = $('#yusu_slide').val();
            var sound_slide = $('#sound_slide').val();
            var yudiao_slide = $('#yudiao_slide').val();
            var bgm_src = $('[name="bgm_src"]').val();
            if (!text){
                layer.alert('请输入文本');
                return  false;
            }
            // 等待加载时间
            loading = layer.msg('正在合成中...', {icon: 16,skin:'audio_msg',shade: [0.1, '#f5f5f5'],scrollbar: false, time:0});

            var url = "{php echo createWebUrl('tts', array('op' => 'postTts','themeid'=>$themeid));}";
            $.ajax({
                url:url,
                type:'post',
                data: {
                    text:text,
                    zhubo:zhubo,
                    yusu_slide:yusu_slide,
                    sound_slide:sound_slide,
                    yudiao_slide:yudiao_slide,
                    bgm_src:bgm_src},
                dataType:"json",
                beforeSend: function(){
                    $('#tts_submit').addClass(DISABLED);             // 添加样式
                    $('#tts_submit').attr('disabled', 'disabled');   // 添加属性
                },
                success:function(res){
                    var msg = res.msg;
                    if (res.error == 0) {
                        var data = res.data;
                        var id= data.id;
                        if(data.audio_url){
                            var url = data.audio_url;
                            $("#audioTts").attr('src', url);
                            $("#ttsId").val(id);
                            player.play();
                            $('#tts_submit').text('播放中');
                            $('#tts_submit').removeClass(DISABLED);
                            $('#tts_submit').removeAttr('disabled');
                            layer.close(loading);
                            $('#entryTts').show();
                        }else{
                            $("#ttsId").val(id);
                            $('#progressTts').show();
                            element.progress('createTts','20%');
                            var  percentNum = 20;
                            var  timer = setInterval(function(){
                                percentNum = percentNum + 5;
                                if(percentNum>=70){
                                    clearInterval(timer);
                                }
                                if(percentNum<20){
                                    percentNum = 20;
                                }
                                element.progress('createTts',percentNum+'%');
                            }, 1000);

                            visibleTime =setInterval(function(){
                                getTts(id)
                            }, 10000);
                        }
                    }else{
                        layer.msg(msg);
                    }
                },
                error:function(e){
                    $('#tts_submit').removeClass(DISABLED);
                    $('#tts_submit').removeAttr('disabled');
                    layer.msg("提交失败！");
                    $('#progressTts').hide();
                    layer.close(loading);
                },
            });
            return false;
        });

        $("#audioTts")[0].addEventListener("ended", function(){
            $('#tts_submit').text('试听');
        })

        $(document).on('click',"#entryTts",function(){
            var  audioSrc = $("#audioTts").attr('src');
            var ttsId = $("#ttsId").val();
            var url = "{php echo createWebUrl('tts',array('op' => 'entryTts'));}";
            if(audioSrc) {
                $.ajax({
                    url: url,
                    type: 'post',
                    data: {
                        audio_url: audioSrc,
                        id:ttsId
                    },
                    dataType: "json",
                    success: function (res) {
                        var msg = res.msg;
                        if (res.error == 0) {
                            var data = res.data;
                            var url = data.audio_url;
                            $('[name="musicsrc"]').val(url);
                            //layer.msg(msg);
                        } else {
                            layer.msg(msg);
                        }
                    },
                    error: function (e) {
                        layer.msg("提交失败！")
                        $('#tts_submit').removeClass(DISABLED);
                        $('#tts_submit').removeAttr('disabled');
                    },
                });
            }
            $("#audioTts").attr("src",'');
            $("#tts_text").text('');
            layer.closeAll();
            return false;
        });

        function getTts(id) {
            percentNum = 75;
            element.progress('createTts', percentNum + '%');
            var url = "{php echo createWebUrl('tts', array('op' => 'getTts','themeid'=>$themeid));}&id=" + id;
            $.getJSON(url, function (res1) {
                if (res1.error == 0 && res1.data) {
                    clearInterval(visibleTime);
                    percentNum = 80;
                    element.progress('createTts', percentNum + '%');
                    var addBgmUrl = "{php echo createWebUrl('tts', array('op' => 'getBgm','themeid'=>$themeid));}&id=" + id;
                    $.ajax({
                        url: addBgmUrl,
                        type: 'get',
                        dataType: "json",
                        beforeSend: function () {
                            percentNum = 85;
                            element.progress('createTts', percentNum + '%');
                        },

                        success: function (res2) {
                            var msg = res2.msg;
                            if (res2.error == 0) {
                                var data = res2.data;
                                var id = data.id;
                                var url = data.audio_url;
                                $("#audioTts").attr('src', url);
                                $("#ttsId").val(id);
                                element.progress('createTts', '100%');
                                player.play(); /*播放*/
                                $('#tts_submit').text('播放中');
                                $('#tts_submit').removeClass(DISABLED);
                                $('#tts_submit').removeAttr('disabled');
                                $('#entryTts').show();
                            } else {
                                layer.msg(msg);
                            }
                            $('#progressTts').hide();
                            layer.close(loading);
                        },
                        error: function (e) {
                            $('#tts_submit').removeClass(DISABLED);
                            $('#tts_submit').removeAttr('disabled');
                            layer.msg("提交失败！")
                            layer.close(loading);
                            $('#progressTts').hide();
                        }
                    });
                } else {
                    $('#tts_submit').removeClass(DISABLED);
                    $('#tts_submit').removeAttr('disabled');
                    layer.msg("获取失败！")
                    $('#progressTts').hide();
                    layer.close(loading);
                }
            })
        }

        form.on('select(bgmType)', function(data){
            $("#bgmName").children().not(":first").remove();
            //city index from 0;
            var bgmList =bgMusicArr[data.value];
            var bgmName = [];
            if(bgmList){
                bgmName = bgmList.list;
            }
            //循环
            for (var i = 0; i < bgmName.length; i++) {
                $("#bgmName").append("<option value="+i+">"+bgmName[i]+"</option>");
            }
            form.render('select');   //重新渲染 固定写法
        });

        form.on('select(bgmName)', function(data){
            typeIndex= $('#bgmType').val();
            var bmg_url = bgMusicArr[typeIndex].url[data.value];
            $('[name="bgm_src"]').val(bmg_url);
        });

    })


    //字数统计
    $(function(){
        //先选出 textarea 和 统计字数 dom 节点
        var textArea =  $('#tts_text'),
            word = $('#count');
        //调用
        statInputNum(textArea,word);
    });

    /*
     * 剩余字数统计
     * 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>
     */
    function statInputNum(textArea,numItem) {
        var max = 600,
            curLength;
        textArea[0].setAttribute("maxlength", max);
        curLength = textArea.val().length;
        //curLength =  textArea.val().replace(/\n|\r/gi,"").length;
        numItem.text(curLength);
        textArea.on('input propertychange', function () {
            var _value = $(this).val().replace(/\n|\r|(^\s*)|(\s*$)/gi,"");
            numItem.text(_value.length);
        });
    }

</script>